<template>
	<view class="h-100v flex flex-column">
		<view>

      <view class="user-recharge-wrapper" :style="{backgroundColor:systemTheme.bg }">
        <view class="user-recharge-box pb-10">
          <view class="recharge-info">
            <text :class="{'invisible':type}" @click="handlePickerShow">{{parseYear}}年<text class="iconfont icon-arrow-down"></text></text>
          </view>

          <view class="recharge-button" >
            <view class="all-header">
              <view class="h-44p flex justify-between items-center px-10" style="color: white;font-weight: bold" @click="type?type=0:type=1">
                <text class="iconfont icon-arrow-left" style="font-size: 24px;" @click="goBack"></text>
                <text class="text-17">{{type?'年账单':'月账单'}}<text class="iconfont icon-arrow-down ml-4"></text></text>
                <text class="iconfont icon-right invisible" style="font-size: 24px;"></text>
              </view>
            </view>
          </view>
        </view>

        <!--      净资产-->
        <view class="recharge-user-money-total">
          <view style="display: flex;align-items: center">
            <text class="recharge-money-title" >结余：</text>
          </view>
          <text style="color: white;font-weight: bold;font-size: 32px" v-show="topNum.surplus!==0" class="num" v-html="topNum.surplus"></text>
          <text style="color: white;font-weight: bold;font-size: 32px" v-show="topNum.surplus===0" class="num">0.<text class="text-18">00</text></text>
        </view>
        <!--      资产与负债-->
        <view style="display: flex;flex-direction: row;justify-content: space-between">
          <view style="color: white" class="recharge-user-money">
            <view style="display: flex;justify-content: center;align-items: center;color: white">
              <text class="recharge-money-title" style="font-size: 16px">收入：</text>
            </view>
            <text style="color: white;font-size: 16px" v-show="topNum.in!==0" class="num" v-html="topNum.in"></text>
            <text style="color: white;font-size: 16px" v-show="topNum.in===0" class="num">0.<text class="text-12">00</text></text>
          </view>
          <view class="recharge-user-money">
            <view style="display: flex;justify-content: center;align-items: center">
              <text style="color: white;font-size: 16px" class="recharge-money-title"> 支出：</text>
            </view>
            <text style="color: white;font-size: 16px" v-show="topNum.pay!==0" class="num" v-html="topNum.pay"></text>
            <text style="color: white;font-size: 16px" v-show="topNum.pay===0" class="num">0.<text class="text-12">00</text></text>
          </view>
        </view>
      </view>
		</view>
		<view class="flex-auto flex flex-column" style="background-color: #fff;margin: 10rpx 20rpx 20rpx 20rpx;;  border-radius: 10rpx;">
			<view style="overflow: auto;">
				<view class="flex justify-between mb-10 px-24 py-10 text-10" style="border-bottom: 1px solid #ddd;">
					<text class="basis-1/4 text-center">{{type?'年份':'月份'}}</text>
					<text class="basis-1/4 text-center">收入</text>
					<text class="basis-1/4 text-center">支出</text>
					<text class="basis-1/4 text-center">结余</text>
				</view>
				<scroll-view scroll-y="true">
					<view class="flex justify-between px-24 py-12 text-12" style="border-bottom: 1px solid #ddd;color: black" v-for="(item,index) in list" :key="index">
						<text class="basis-1/4 text-center" style="font-weight: bold">{{type?item.year:item.mon}}</text>
						<text class="basis-1/4 text-center">{{formatNum(item.in)}}</text>
						<text class="basis-1/4 text-center">{{formatNum(item.pay)}}</text>
						<text class="basis-1/4 text-center" :style="{color:(item.in - item.pay)>0 ? systemTheme.inColor:(item.in - item.pay) <0 ?systemTheme.outColor :''}">{{formatNum(item.in - item.pay)}}</text>
					</view>
				</scroll-view>
			</view>
		</view>

    <KDatePicker v-model="showDatePicker"  :defaultValue="datePickerValue" @change="handleConfirm" type="year" ></KDatePicker>

  </view>
</template>

<script>
	import {getAllAccounts,getAllYear,getTotalAccounts} from '@/api/api.js';
	import {fmtNum,formatMoney,simpleMoney} from '@/common/format.js';
  import {useSystem} from "@/store/theme";
  import KDatePicker from "../../components/k-date-picker/KDatePicker.vue";
  import dayjs from 'dayjs'

  export default {
		data() {
			return {
				type:0,
				showDatePicker :false,
				datePickerValue :0,
				list:[],
				years:[],
				allAccounts:[],
				totalAccounts:[]
			}
		},
    setup() {
      const systemTheme = useSystem()
      return {systemTheme}
    },
		computed:{
      parseYear(){
        return parseInt(dayjs(this.datePickerValue).format('YYYY'))
      },
			statusBarHeight() {
				return (uni.getSystemInfoSync()).statusBarHeight +'px'
			},
			topNum() {
				const html={}
				let in_num=0,pay_num=0,surplus_num=0;
				for (let item of this.list) {
					in_num += item.in;
					pay_num += item.pay;
					surplus_num = in_num - pay_num
				}
				return {
					in:in_num===0?0:fmtNum(in_num,12),
					pay:pay_num===0?0:fmtNum(pay_num,12),
					surplus:surplus_num===0?0:fmtNum(surplus_num,22)
				}
			}
		},
		watch:{
			type(val) {
				this.list = val?this.totalAccounts:this.allAccounts
			}
		},
		components:{KDatePicker},
		async onShow() {
			const yearsArr = await getAllYear()
			this.years = [yearsArr[0],yearsArr[yearsArr.length-1]]
			this.datePickerValue = new Date().getTime()
			await this.getData()
		},
		methods: {
			async getData() {
				this.allAccounts = await getAllAccounts(this.parseYear)
				this.totalAccounts = await getTotalAccounts()
				this.list = this.allAccounts
			},
			handlePickerShow() {
			  this.showDatePicker = true
			},
			async handleConfirm(e) {
        if(typeof e === 'number' && !isNaN(e)){
          this.datePickerValue = e;
          await this.getData()
        }
			},
			handleCancel() {
			  this.showDatePicker = false
			},
			formatNum(num) {
				return formatMoney(num)
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	text.txt {
		color: #666;
	}
	text.num {
		font-size: 24px;
		color: #333;
	}


  .user-recharge-wrapper {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin: 80rpx 20rpx 20rpx 20rpx;

    .user-recharge-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .recharge-info {
        color: white;
        font-weight: bold;
      }

      .recharge-button {
        flex-shrink: 0;
      }
    }

    .recharge-user-money {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
      color: #333;

      .recharge-money {
        font-weight: bold;
        font-size: 30rpx;
      }

      .recharge-money::first-letter {
        font-size: 22rpx;
      }
    }


    .recharge-user-money-total {
      display: flex;
      justify-content: space-between;
      margin-top: 10rpx;
      font-size: 26rpx;
      color: white;
      flex-direction: column;
    }
  }

</style>
